<template>
	<view class="model-public">
		<u-popup :show="show" :safeAreaInsetBottom="false" :round="10" mode="center" @close="cancelButton" :closeOnClickOverlay="closeOnClickOverlay">
			<view class="announcementModel" :style="{ width: width }">
				<view class="header fboxCol">
					<view class="fboxRow Xend">
						<view class="close" v-if="isShowClose" @click="cancelButton"><u-icon class="del-icon" name="close" size="20"></u-icon></view>
					</view>
					<view class="title font32 lh44 fwb" :style="{ 'text-align': titlePosition }">{{ title }}</view>
					<!-- <view class="title font30 lh44 color-E8CDA7">{{title}}</view> -->
				</view>
				<view class="content fboxRow font32" :style="{ 'justify-content': footerObj[contentPosition] }" v-if="content">{{content}}</view>
				<view class="content fboxRow font32" :style="{ 'justify-content': footerObj[contentPosition] }" v-else><slot name="msg"></slot></view>
				<view class="fboxRow footer" :style="{ 'justify-content': footerObj[footerPosition] }">
					<view class="fboxRow">
						<view v-if="isShowCancelText" class="canceBtn btn font28 fboxRow Xcenter Ycenter" @tap="cancelButton">{{ cancelText }}</view>
						<view v-if="isShowConfirmText" class="confirmBtn btn font28 fboxRow Xcenter Ycenter" @tap="confirmButton">{{ confirmText }}</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	props: {
		// start center end
		footerPosition: {
			type: String,
			default: 'end'
		},
		// left center right
		titlePosition: {
			type: String,
			default: 'left'
		},
		width: {
			type: String,
			default: '670rpx'
		},
		// 是否显示关闭按钮
		isShowClose: {
			type: Boolean,
			default: true
		},
		// 关闭按钮文字
		cancelText: {
			type: String,
			default: '取消'
		},
		// 是否显示关闭按钮
		isShowCancelText: {
			type: Boolean,
			default: true
		},
		// 是否显示确定按钮
		isShowConfirmText: {
			type: Boolean,
			default: true
		},
		// 确定按钮文字
		confirmText: {
			type: String,
			default: '确定'
		},
		// 标题
		title: {
			type: String,
			default: ''
		},
		// 内容
		content: {
			type: String,
			default: ''
		},
		// 内容是否剧中显示
		contentPosition: {
			type: String,
			default: ''
		},
		// 点击遮罩层是否关闭弹框
		closeOnClickOverlay: {
			type: Boolean,
			default: true
		}
	},
	data() {
		return {
			show: false,
			footerObj: {
				start: 'flex-start',
				center: 'center',
				end: 'flex-end'
			}
		};
	},
	methods: {
		cancelButton() {
			this.show = false;
		},
		confirmButton() {
			this.$emit('confirm');
		}
	}
};
</script>

<style lang="scss" scoped>
.model-public ::v-deep .u-popup__content {
	background: none;
}
::v-deep .del-icon {
	.uicon-close {
		color: var(--contentFontFiveColor) !important;
	}
}
.announcementModel {
	background: var(--viewBgColor);
	border-radius: 12rpx;
	padding: 40rpx;
	.content {
		margin: 40rpx 0;
		color: var(--contentFontDarkColor);
	}
	.header {
		position: relative;
		.close {
			position: absolute;
			right: -20rpx;
			top: -20rpx;
		}
	}
	.title {
		color: var(--titleFontColor);
		font-weight: 600;
	}
	.footer {
		.btn {
			border-radius: 8rpx;
			width: 168rpx;
			height: 60rpx;
		}
		.canceBtn {
			// border: 1px solid #e8cda7;
			color: var(--titleFontColor);
			margin-right: 20rpx;
			background: var(--translucenceButtonBackTwoColor);
		}
		.confirmBtn {
			background: linear-gradient(360deg, #ad7b54 0%, #d8a37a 100%);
			border-radius: 8rpx;
			color: var(--buttonTextColor);
		}
	}
}
</style>
